<template>
    <div style="width:100%;height:100%;" id="data_source_con"></div>
</template>

<script>
import echarts from 'echarts';
import util from '@/libs/util';
import Cookies from 'js-cookie';

export default {
    name: 'dataSourcePie',
    data () {
        return {
            baseuser: JSON.parse(Cookies.get('baseUser'))
        };
    },
    mounted () {
        this.$nextTick(() => {
            var dataSourcePie = echarts.init(document.getElementById('data_source_con'));
            var age1 = 0;
            var age2 = 0;
            var age3 = 0;
            var age4 = 0;
            var age5 = 0;
            util.ajax.post('/busine/student/list', util.toFormData({
                orgid: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
            })).then(res => {
                let studentList = res.data.data.list;
                studentList.forEach((item) => {
                    let birth = util.getDate(item.birthdate, 'date');
                    birth = Date.parse(birth.replace('/-/g', '/'));
                    if (birth) {
                        let year = 1000 * 60 * 60 * 24 * 365;
                        var now = new Date();
                        var birthday = new Date(birth);
                        var age = parseInt((now - birthday) / year);
                    }
                    if (age >= 0 && age <= 14) {
                        age1++;
                    } else if (age > 14 && age <= 45) {
                        age2++;
                    } else if (age > 45 && age <= 59) {
                        age3++;
                    } else if (age > 59 && age <= 74) {
                        age4++;
                    } else if (age > 74) {
                        age5++;
                    }
                });
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: ['14以下', '15-45', '46-59', '60-74', '75以上']
                    },
                    series: [
                        {
                            name: '年龄段',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '60%'],
                            data: [
                                {value: age1, name: '14以下', itemStyle: {normal: {color: '#9bd598'}}},
                                {value: age2, name: '15-45', itemStyle: {normal: {color: '#ffd58f'}}},
                                {value: age3, name: '46-59', itemStyle: {normal: {color: '#abd5f2'}}},
                                {value: age4, name: '60-74', itemStyle: {normal: {color: '#ab8df2'}}},
                                {value: age5, name: '75以上', itemStyle: {normal: {color: '#e14f60'}}}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                dataSourcePie.setOption(option);
                window.addEventListener('resize', function () {
                    dataSourcePie.resize();
                });
            });

        });
    }
};
</script>
